<template>
  <view class="page">
    <view class="wrap">
      <!-- 顶部商品大图（灰底舞台 + 居中图） -->
      <view class="hero">
        <view class="hero-stage">
          <image class="hero-img" mode="widthFix" :src="pic" />
          <view class="hero-badge" @tap="openBill">
            <image class="hero-badge-img" mode="widthFix" :src="billIcon" />
          </view>
        </view>
        <view class="hero-title">{{data_info.sbflmc}}</view>
      </view>

      <!-- 订单信息卡片（白卡 + 胶囊行） -->
      <view class="card">
        <view class="cells">
          <view class="cell" style="display:none;"><text class="cell-label">名字：</text><text class="cell-value">林某某</text></view>
          <view class="cell"><text class="cell-label">下单时间：</text><text class="cell-value">{{ data_info.ctime }}</text></view>
          <view class="cell"><text class="cell-label">使用时长：</text><text class="cell-value">{{ data_info.sysc }}</text></view>
          <view class="cell" style="display:none;"><text class="cell-label">行驶距离：</text><text class="cell-value">8公里</text></view>
          <view class="cell"><text class="cell-label">起步价：</text><text class="cell-value">{{ data_info.qibujia }}元</text></view>
		  <view class="cell"><text class="cell-label">支付状态：</text><text class="cell-value">{{ data_info.ddzt }}</text></view>
          <view class="cell cell-arrow" @tap="openDiscount">
            <text class="cell-label">优惠减免：</text>
            <text class="cell-value">无</text>
            <text class="cell-right">›</text>
          </view>
        </view>

        <!-- 费用行（卡片底部左右对齐） -->
        <view class="fee-row">
          <text class="fee-label">骑行费</text>
          <text class="fee-amount">{{ data_info.jine }}元</text>
        </view>
      </view>

      <view class="space"></view>
    </view>

    <!-- 底部按钮（大圆角，整体居中） -->
    <view class="footer" v-if="if_details == 0">
      <button class="btn-primary" @tap="sub_order()" v-if="load_order == 1">立即支付</button>
    </view>
  </view>
</template>



<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  name: 'PayPage',
  data() {
    return {
	  rowid:'',
	  pic:'',
	  data_info:{},
	  load_order:0,
	  if_details:0,
	  pay_order:'',
	  zfjl:'',
      billIcon: 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/logo.png' // 可替换为你的“账单/明细”图标
    }
  },
  onLoad(options) {
    that = this;
	that.rowid = options.rowid;
	if(options.act == 'details'){
		uni.setNavigationBarTitle({
			title:'订单详情'
		});
		that.if_details = 1;
	}else{
		that.zfjl = options.zfjl;
	}
    that.plusReady();
  },
  methods: {
	plusReady(){
		userInfo = uni.getStorageSync('userInfo');
		if(userInfo){
		  userInfo = JSON.parse(userInfo);
		  that.if_login = true;
		  that.member_profile = userInfo;
		  that.get_orders();
		  that.load_pay_data();
		}else{
		  that.if_login = false;
		}
	},
	load_pay_data(){
		console.log(121212);
		uni.request({
		  url: config.request_url+'/v2/open/worksheet/getFilterRows',
		  method: 'POST',
		  header: {
			'Content-Type': 'application/json'
		  },
		  data: {
			"appKey": config.appKey,
			"sign": config.sign,
			"worksheetId": "zfjl",
			"pageSize": 50,
			"pageIndex": 1,
			"filters": [
				{
					"controlId": "rowid",
					"dataType": 2,
					"spliceType": 1,
					"filterType": 2,
					"value": that.zfjl 	// 支付记录rowid ，多条记录用英文逗号隔开
				}
			]
		  },
		  success: (res) => {
			//console.log('返回结果:', res.data);
			res = res.data;
			//console.log(res);
			if(res.success){
				//that.data_info = res.data;
				that.pay_order = res.data.rows[0].zfjlbh;
				//common_config.calert(that.pay_order);
			}else{
				 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
			}
		  },
		  fail: (err) => {
			console.error('请求失败:', err);
			uni.showToast({ title: '网络错误', icon: 'none' });
		  }
		})  
	},
	//获取当前用户订单状态
	get_orders(){
	  uni.request({
	    url: config.request_url+'/v2/open/worksheet/getRowByIdPost',
	    method: 'POST',
	    header: { 'Content-Type': 'application/json' },
	    data: {
	      "appKey": config.appKey,
	      "sign": config.sign,
	      "worksheetId": "ddgl",
		  "rowId": that.rowid,
	    },
	    success: (res) => {
	      res = res.data;
	      if(res.success){
			that.load_order = 1;
	        var datas = res.data;
			console.log(datas);
			that.data_info = datas;
			var r = JSON.parse(that.data_info.sbtp);
			that.pic = r[0].original_file_full_path;
	      }else{
	        uni.showToast({ title: res.data?.msg || '数据获取失败', icon: 'none' });
	      }
	    },
	    fail: (err) => {
	      console.error('请求失败:', err);
	      uni.showToast({ title: '网络错误', icon: 'none' });
	    }
	  })  
	},
	//提交支付
	sub_order(){
		uni.showLoading({
			title:'正在提交支付...'
		})
	  uni.request({
	    url: config.weixin_url+'/api/Login/GetWxPrepayId',
	    method: 'POST',
	    header: { 'Content-Type': 'application/json' },
	    data: {
	      openId:userInfo.openid,
		  totalMoney:that.data_info.jine*100,
		  billNo:that.pay_order,
		  title:'充值',
		  sign:'123455'
	    },
	    success: (res) => {
			uni.hideLoading();
	      res = res.data;
	     if(res.status == 200){
			 var datas = res.response;
			 uni.requestPayment({
			 	provider: 'wxpay',
			 	orderInfo: that.pay_order,
			 	timeStamp:datas.timeStamp,
			 	nonceStr:datas.nonceStr,
			 	package:datas.package,
			 	signType:datas.signType,
			 	paySign:datas.paySign,
			 	success: function () {
			 		uni.redirectTo({ url:'pay_suc' });
			 	},
			 	fail: function (err) {
			 		console.log(err);
			 		common_config.calert('支付失败');
			 	}
			 });
		 }else{
			 common_config.calert(res.msg);
		 }
	    },
	    fail: (err) => {
	      console.error('请求失败:', err);
	      uni.showToast({ title: '网络错误', icon: 'none' });
	    }
	  })  
	},
    openBill() { uni.showToast({ title: '查看明细', icon: 'none' }) },
    openDiscount() { uni.showToast({ title: '选择优惠', icon: 'none' }) },
    payNow() { uni.showToast({ title: '拉起支付', icon: 'none' }) /* TODO: 调起微信支付 */ }
  }
}
</script>

<style scoped>
.page { background:#f4f5f7; min-height:100vh; padding-bottom:160rpx; }
.wrap { width:686rpx; margin:0 auto; }

.hero { padding:24rpx 0 0; }
.hero-stage { position:relative; height:360rpx; border-radius:20rpx; background:#E8E8E8; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-img { width:320rpx; }
.hero-badge { position:absolute; right:20rpx; top:20rpx; width:64rpx; height:64rpx; border-radius:16rpx; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8rpx 20rpx rgba(0,0,0,.08); }
.hero-badge-img { width:44rpx; height:44rpx; }
.hero-title { text-align:center; color:#8b8b8b; font-size:30rpx; padding:16rpx 0 0; }

.card { margin-top:20rpx; background:#fff; border-radius:28rpx; box-shadow:0 8rpx 24rpx rgba(0,0,0,.04); padding:24rpx; }
.cells { padding:18rpx; border-radius:24rpx; }
.cell { background:#f3f4f6; display:flex; align-items:center; min-height:88rpx; padding:0 28rpx; background:#fff; border-radius:999rpx; margin-bottom:16rpx; }
.cell:last-child { margin-bottom:0; }
.cell-label { font-size:28rpx; color:#666; }
.cell-value { margin-left:auto; font-size:28rpx; color:#333; }
.cell-arrow .cell-right { margin-left:12rpx; font-size:38rpx; color:#b3b3b3; }

.fee-row { display:flex; align-items:center; padding:28rpx 6rpx 0; }
.fee-label { font-size:30rpx; color:#3a3a3a; font-weight:700; }
.fee-amount { margin-left:auto; font-size:34rpx; color:#333; font-weight:700; }

.space { height:80rpx; }

.footer { position:fixed; left:0; right:0; bottom:24rpx; display:flex; justify-content:center; }
.btn-primary { width:686rpx; height:100rpx; line-height:100rpx; border-radius:999rpx; background:#0a6fb5; color:#fff; font-size:34rpx; font-weight:700; border:none; }


</style>
